<template>
  <div class="parts">
    <v-header :title="this.$route.meta.title"></v-header>
    <van-tabs v-model="active" swipeable animated>
      <van-tab v-for="item in getpartslist" :title="item.name" :key="item.id">
        <div v-for="(ii, index) in item.data" :key="index">
          <img v-lazy="ii.img_url" alt="" />
          <p class="p1">{{ ii.name }}</p>
          <p class="p2">{{ ii.content }}</p>
          <p class="p3">￥{{ ii.price }}.00</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import header from "@/components/header/index.vue";
export default {
  components: {
    "v-header": header,
  },
  data() {
    return {
      getpartslist: [],
      active: 0,
    };
  },
  methods: {
    async getparts() {
      const res = await this.$http.getparts();
      // console.log(res.data[2].data);
      this.getpartslist = res.data;
    },
  },
  created() {
    this.getparts();
  },
};
</script>
<style lang="scss" scoped>
.parts {
  margin-top: 47px;
  background: #fff;
}
.van-tab__pane-wrapper {
  padding: 8px;
  .van-tab__pane {
    div {
      float: left;
      margin: 4px 0;
      padding: 10px 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      width: 50%;
      border: 1px solid #eee;
      justify-content: center;
      align-items: center;
      img {
        width: 150px;
        height: 130px;
      }
      .p1 {
        // padding: 0 10px;
        color: #333;
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .p2 {
        color: #333;
        font-size: 12px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .p3 {
        color: red;
        font-size: 16px;
      }
      p {
        margin: 5px 0;
      }
    }
  }
}
.van-tab__pane {
  display: flex;
}
</style>
